<script setup lang="js">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';

defineOptions({
  name: 'PieChartTwo'
});

const appStore = useAppStore();

const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  series: [{
    name: '库存情况',
    type: 'pie',
    radius: '68%',
    center: ['50%', '50%'],
    clockwise: false,
    data: [{
      value: 45,
      name: 'CARD'
    }, {
      value: 25,
      name: 'SSD'
    }, {
      value: 15,
      name: 'U盘'
    }, {
      value: 8,
      name: '嵌入式'
    }, {
      value: 7,
      name: 'FLASH'
    }],
    label: {
      normal: {
        textStyle: {
          color: '#999',
          fontSize: 14,
        }
      }
    },
    labelLine: {
      normal: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        borderWidth: 4,
        borderColor: '#ffffff',
      },
      emphasis: {
        borderWidth: 0,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }],
  color: [
    '#00acee',
    '#52cdd5',
    '#79d9f1',
    '#a7e7ff',
    '#c8efff'
  ],
  backgroundColor: '#fff'
}));

// console.log(appStore.locale);
async function mockData() {
  await new Promise(resolve => {
    setTimeout(resolve, 1000);
  });
  // console.log('mock');
  updateOptions(opts => {
    opts.series[0].data = [
      { name: $t('page.home.study'), value: 20 },
      { name: $t('page.home.entertainment'), value: 10 },
      { name: $t('page.home.work'), value: 40 },
      { name: $t('page.home.rest'), value: 30 }
    ];

    return opts;
  });
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory();
    console.log('local');
    // opts.series[0].name = originOpts.series[0].name;

    opts.series[0].data = [
      { name: $t('page.home.study'), value: 20 },
      { name: $t('page.home.entertainment'), value: 10 },
      { name: $t('page.home.work'), value: 40 },
      { name: $t('page.home.rest'), value: 30 }
    ];

    return opts;
  });
}

async function init() {
  mockData();
}

watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

// init
init();
</script>

<template>
  <ACard :bordered="false" class="card-wrapper">
    <div ref="domRef" class="h-360px overflow-hidden"></div>
  </ACard>
</template>

<style scoped></style>
